<template>
  <div class="uploadMusic">
    <div style="display: flex; align-items: center; justify-content: center">
      <el-upload
        class="avatar-uploader"
        :action="baseURL + '/file/upload'"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        name="files"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
      <el-upload
        class="upload-demo"
        drag
        :action="baseURL + '/file/upload'"
        @success="success"
        @change="change"
        multiple
        name="files"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
    </div>

    <div class="inputBox">
      <el-input
        class="input"
        v-model="songname"
        placeholder="请输入音乐名称"
      ></el-input>
      <el-input
        class="input"
        v-model="author"
        placeholder="请输入作者"
      ></el-input>
      <el-select class="select" v-model="value" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <div class="button" @click="upload">上传</div>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from "vue";
import { uploadApi } from "../api/file";
import { insertMusicApi } from "../api/song";
import { baseURL } from "../api/request";
import axios from "axios";

export default {
  setup() {
    const state = reactive({
      input: "",
      author: "",
      options: [
        {
          value: "1",
          label: "摇滚",
        },
        {
          value: "2",
          label: "流行",
        },
        {
          value: "3",
          label: "民谣",
        },
        {
          value: "4",
          label: "说唱",
        },
        {
          value: "5",
          label: "纯音乐",
        },
      ],
      value: "民谣",
      uploadOkUrl: "",
      baseURL: "",
      songname: "",
      imageUrl: "",
      musicImg: "/0",
    });
    //上传歌曲成功之后的回调
    const success = (response: any, file: any, fileList: any) => {
      state.uploadOkUrl = response.data[0].url;
    };
    //截取文件名称
    const change = (file: any, fileList: any) => {
      var index = file.name.lastIndexOf(".");
      state.songname = file.name.substring(0, index);
    };
    //上传歌曲
    const upload = () => {
      let form = new FormData();
      form.append("musicName", state.songname);
      form.append("musicAuthor", state.author);
      form.append("musicUrl", state.uploadOkUrl);
      form.append("musicLikeNum", "0");
      form.append("musicBroadcastNum", "0");
      form.append("musicType", state.value);
      form.append("musicImg",state.musicImg)
      insertMusicApi(form).then((res: any) => {
        console.log(res);
      });
    };
    //上传封面成功之后的回调
    const handleAvatarSuccess = (response: any, file: any, fileList: any) => {
       state.imageUrl = URL.createObjectURL(file.raw);
      state.musicImg = response.data[0].url;
    };
    onMounted: {
      state.baseURL = baseURL;
    }
    return { ...toRefs(state), success, change, upload, handleAvatarSuccess };
  },
};
</script>
<style lang="less" scoped>
.uploadMusic {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  .avatar-uploader {
    width: 100px;
    height: 100px;
    border: 1px #000 dashed;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    margin-right: 20px;
  }
  .button {
    width: 300px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: @subject_green;
    color: #fff;
    border-radius: 20px;
    margin-top: 50px;
  }
  .upload-demo {
    margin-top: 10%;
  }
  .inputBox {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    .input {
      margin: 10px;
      width: 10%;
    }
    .select {
    }
  }
}
</style>